<template>
    <scroll-view :scroll-y="true" class="artificialGuidedQuestionsStyle"
        :style="{ paddingBottom: safeAreaInsets.bottom + 20 + 'px' }">
        <!-- <view class="cardStyle">
            <image src="./static/cardBg.svg" style="width:100%;height:280rpx;position: relative;" />
            
            <view class="topTopStyle" >
                <view class="labelStyle" style="display: inline-block;margin-right: 20rpx;" @click="onJump">续费</view>
                <text>当前剩余人工导题数量：</text>
                <text style="font-size: 40rpx;">200道</text>
            </view>
        </view> -->
        <view class=stepOne>
            <view class="flex">
                <view class="stepStyle center">Step1</view>
                <view style="font-weight: bold;font-size: 30rpx;margin-left: 40rpx;">
                    上传标准及教材
                </view>
            </view>
            <view class="uploadStyle center">
                <image src="./static/uploadTipsIcon.svg" style="width: 441rpx;height: 104rpx" @click="uploadFile"
                    v-if="!fileInfo.fileName" />
                <view v-else>
                    <view class="fileItemStyle">
                        <image :src="getFileIcon(fileInfo.fileName)"
                            style="width: 80rpx;height: 80rpx;margin-right: 22rpx" />
                        <view class="flex flex-column">
                            <view style="font-size: 32rpx;width: 500rpx;" class="oneWrap">{{fileInfo.fileName}}</view>
                            <view class="flex">
                                <view style="margin-top: 8rpx;justify-content: flex-start;" class="center">
                                    <image src="./static/describeIcon.svg"
                                        style="width: 32rpx; height: 32rpx;margin-right: 16rpx;" />
                                    <text style="margin-right: 44rpx;color:#37B874;text-decoration: dashed;"
                                        @click="onAddDescr">添加说明</text>
                                </view>
                                <view style="margin-top: 8rpx;margin-left: 60rpx;justify-content: flex-start;"
                                    class="center">
                                    <image src="./static/delIcon.svg"
                                        style="width: 26rpx; height: 28rpx;margin-right: 16rpx;" />
                                    <text style="margin-right: 44rpx;color:#F53F3F; text-decoration: dashed;"
                                        @click="onDelFile">删除</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <text v-if="!fileInfo.fileName" class="textStyle center" style="margin-top: 24rpx;" @click="uploadFile">
                    点击选择文档
                </text>
            </view>
            <view class="numStyle">
                <view class="inputStyle">
                    <input 
                        placeholder="请输入人工导题数量" border="none" :customStyle="{width:'80%',height:'72rpx'}"
                        placeholder-style="color: #999"  
                        :value="numValue" type="number"  
                        @input="(e)=>onInputNum(e)"/>
                </view>
                <view class="btnStyle center" @click="()=>onOkUpload()">
                    上传文档
                </view>
            </view>
            <view style="margin-top: 34rpx;color: #666666;font-size: 24rpx;">
                <view style="margin-bottom: 20rpx;">上传说明</view>
                <view v-for="(item, inde) in tipsInfo" :key="inde" style="line-height: 50rpx;text-align: justify;">
                    {{ inde + 1 }} 、{{ item }}
                </view>
            </view>
        </view>
        <view class="stepTwo " style="padding: 54rpx 34rpx 42rpx 0rpx; position: relative;">
            <view class="flex">
                <view class="stepStyle center">Step2</view>
                <view style="font-weight: bold;font-size: 30rpx;margin-left: 40rpx;">
                    生成情况
                </view>
            </view>
            <view class="lineStyle"></view>
        </view>
        <view v-if="fileList.length">
            <view class="resultStyle" v-for="(item) in fileList" :key="item.uuid">
                <view class="flex">
                    <image :src="getFileIcon(item.documentName)"
                        style="width: 80rpx;height: 80rpx;margin-right: 22rpx" />
                    <view class="flex flex-column flex1">
                        <view style="font-size: 32rpx;">{{item.documentName}}</view>
                        <view style="color: #999;font-size: 24rpx; line-height: 50rpx;">
                            <text style="margin-right: 44rpx;">{{ item.status==1?'生成中':'已完成'}}</text>
                            <text>{{item.insertDate.split(" ")[0]}}</text>
                        </view>
                    </view>
                </view>
                <view class="flex" style="margin-top: 20rpx;padding-left: 16rpx;">
                    <view v-for="(itm, idx) in menuDict" class="center" :key="idx" @click="()=>onMenuClick(itm,item)"
                        :style="{ margin: idx == 1 ? '0rpx 40rpx' : '0rpx' }">
                        <image :src="`./static/menuIcon/${itm.icon}.svg`"
                            style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" />
                        <text v-if="(itm.icon=='stqrIcon'||itm.icon=='daotiIcon')&&item.isStore==1"
                            style="text-decoration:underline;font-size: 28rpx;color: #999;">{{ itm.title }}</text>
                        <text v-else style="text-decoration:underline;font-size: 28rpx;">{{ itm.title }}</text>
                    </view>
                </view>
            </view>
        </view>
        <view v-else style="height: 450rpx" class="center">
            <u-empty text="暂无数据" mode="list"></u-empty>
        </view>
        <view style="font-size: 24rpx;color: #666;margin-top: 56rpx;line-height: 52rpx;text-align: justify;">
            <view>查看说明：</view>
            <view>
                如发现少题、导入错误等上传错误，可点击 【导题反馈】 按钮上报，我们将会为您处理，您可以查看反馈历史，跟进客服处理进度。
            </view>
        </view>
        <!-- 新增 -->
        <BotMenu :isPopup="isRemarkPopUp" @close="isRemarkPopUp = false" title="输入备注">
            <view style="padding: 48rpx 30rpx;">
                <view style="background-color: #F9F9F9;border-radius: 24rpx;padding: 22rpx 34rpx;min-height: 180rpx;">
                    <textarea v-model="remarkContent" :border="'none'" class="xzt-placeholder"
                        style="width:100%;min-height: 180rpx;" :placeholder="`请输入备注信息`" :maxlength="-1"
                        :auto-height="true">

                    </textarea>
                </view>
            </view>
            <view class="okBtn center" @click="onBatchInputOk">
                确定
            </view>
        </BotMenu>
        <!-- 查看备注 -->
        <BotMenu :isPopup="isRemarkShowPopUp" @close="isRemarkShowPopUp = false" title="查看说明">
            <view style="padding: 48rpx 30rpx;" v-if="selectGenerateFileInfo.remark">
                <view style="background-color: #F9F9F9;border-radius: 24rpx;padding: 22rpx 34rpx;min-height: 180rpx;">
                    <text style="color: #666;">{{selectGenerateFileInfo.remark}}</text>
                </view>
            </view>
            <view v-else style="height: 500rpx" class="center">
                <u-empty text="暂无数据" mode="list"></u-empty>
            </view>
        </BotMenu>
        <!-- 确认 -->
        <BotMenu :isPopup="isConfirmPopUp" @close="isConfirmPopUp = false" title="温馨提示">
            <view style="padding: 120rpx 30rpx;text-align: center;" class="center">
                <image src="./static/tipIcon.svg" style="width: 40rpx;height: 40rpx;margin-right: 28rpx;" />
                <text>确认是否进行此操作？</text>
            </view>
            <view class="okBtn center" @click="onSumitOprtion">
                确定
            </view>
        </BotMenu>
        <!-- 查询当前所属机构 -->
        <BotMenu :isPopup="isAffiliationPopup" @close="isAffiliationPopup = false" title="选择服务机构">
            <scroll-view :scroll-y="true" style="height: 800rpx;">
                <view class="selectTypeItem" v-for="(item, index) in organList" :key="item.organId || index"
                    @click="()=>onSelectOrgan(item)">
                    {{ item.name }}
                </view>
            </scroll-view>
        </BotMenu>
        <!-- 兑换明细 -->
        <BotMenu :isPopup="isExchangeDetails" @close="isExchangeDetails = false" title="兑换明细">
            <view class="exchangeWrap">
                <view class="exchangeStyle">
                    <view class="topStyle">
                        <view class="leftStyle">
                            <image src="./static/smallIcon/topTitile.svg" />
                            <text style="color: #fff;">{{`本次兑换${numValue||0}道`}}</text>
                        </view>
                        <view class="rightStyle">
                            <image src="./static/smallIcon/yellowMoneyIcon.svg" />
                            <text >余额：{{ modeConfig.userWalletVO.userBalance||0}}</text>
                            <view class="lineStyle"></view>
                            <text>积分：{{  modeConfig.userWalletVO.userScore||0 }}</text>
                        </view>
                    </view>
                    <scroll-view :scroll-y="true" class="centerStyle" v-if="modeConfig.currentModelType==2">
                        <view v-for="item in modeConfig.infoList" style="margin-bottom: 16rpx;">
                            <text>{{ `试题区间:${item.startInterval||0}-${item.endInterval||0},` }}</text>
                            <text>{{ `单价: 金额:${item.stepCost||0}/道题` }}</text>
                            <text v-if="modeConfig.integralExchange">{{ `,或 积分:${item.stepIntegral}/道题` }}</text>
                        </view>
                    </scroll-view>
                    <scroll-view :scroll-y="true" class="centerStyle v-center"  v-else>
                        <view  style="margin-bottom: 16rpx;">
                            <text>{{ `试题数量:${numValue||0}`}}</text>
                            <text>{{ `单价: 金额:${item.fixedCost||0}/道题` }}</text>
                            <text v-if="modeConfig.integralExchange">{{ `,或 积分:${item.fixedIntegral||0}/道题` }}</text>
                        </view>
                    </scroll-view>
                    <view class="bottomStyle">
                        <text>{{`总计：${modeConfig.totalAmountCost||0}金额`}}</text>
                        <text v-if="modeConfig.integralExchange">{{`或${modeConfig.totalIntegralCost||0}积分` }}</text>
                    </view>
                </view>
                <view class="v-center" style="margin:60rpx 0 0 40rpx" v-if="modeConfig.integralExchange">
                    <image src="./static/smallIcon/dhMethod.svg" style="width: 38rpx;height: 38rpx;margin-right: 26rpx;"/>
                    <text>兑换方式：</text>
                    <view class="flex">
                        <view class="center" v-for="item in exchangeMethodDict" @click="selectMethod = item.value" style="margin-right: 26rpx;">
                            <image :src="`./static/${selectMethod == item.value ? 'selectIcon' : 'noSelectIcon'}.svg`"
                                style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" />
                            <view style="margin-left: 10rpx;">{{ item.text }}</view>
                        </view>
                </view>
                </view>
            </view>
            <view class="okBtn center" @click="onExchangeSubmit">
                确定
            </view>
        </BotMenu>
    </scroll-view>
</template>

<script>

import { getArrObjectByProperty, getBase64ByUrl, notificationFun, onShowTipInfo } from "../utils/PrjUtils";
import {exchangeInfo, getOrganList, importStructTheoryArtificialFile,listArtificialFile,rightsAdd,storeArtificial}from "./services/myQuestionBankService"
export default {
    name: 'artificialGuidedQuestions',
    data() {
        return {
            // 安全区域
            safeAreaInsets: { bottom: 0 },
            // 提示信息
            tipsInfo: [
               "人工导题流程：点击上传标准教材文档-添加说明（非必填，文档中需包含知识结构目录）-点击确认上传按钮-微信聊天中选择需要导入的文档-查看导入进度-确认导入试题-(首页-我的题库)查看人工上传的题库。",
               "导题数量按照上传试题数量进行计算，若超出剩余人工导题数量，此时按照从上到下的试题顺序依次进行录入，多出试题将不被导入；若未超过剩余人工导题数量，此时按照实际录入题量扣取人工导题数量。",
               "注：需要上传的文件需发送到微信聊天中，可在微信聊天中选择需要上传的标准及教材"
            ],
            // 菜单信息 
            menuDict: [
                {
                    title: "需求说明",
                    icon: "xuqiuIcon",
                },
                {
                    title: "试题确认",
                    icon: "stqrIcon",
                },
                {
                    title: "导题反馈",
                    icon: "daotiIcon",
                },
            ],
            // 是否显示备注弹窗,
            isRemarkPopUp:false,
            // 查看说明
            isRemarkShowPopUp:false,
            // 批量增加选项内容
            remarkContent: '',
            // 确认操作
            isConfirmPopUp: false,
            // 文件信息
            fileInfo:{
                fileName:"",
                filePath:""
            },
            // 上页数据
            pInfo:{},
            // 文件列表
            fileList:[],
            // 选择生成的文件
            selectGenerateFileInfo:{},
            // 所属机构弹出
            isAffiliationPopup:false,
            // 机构列表
            organList:[],
            // 选择的机构id
            organId:"",
            // 导题数据
            numValue:"",
            // 兑换方式
            exchangeMethodDict:[
                {text:"余额",value:1},
                {text:"积分",value:2},
            ],
            // 选择的模式
            selectMethod:1,
            // 选择模式的弹窗
            isExchangeDetails:false,
            // 模式的配置信息
            modeConfig:{}
        };
    },
    onLoad(options) {
        this.pInfo = JSON.parse(decodeURIComponent(options.info))||{}
    },
    onShow() {
       if(this.pInfo.subjectUuid){
            this.onQueryData()
       }
    },
    methods: {
        // 菜单点击事件
        onMenuClick(item, record) {
            if((item.icon=="stqrIcon"||item.icon=="daotiIcon")&&record.isStore==1){
                return ;
            }
            console.log(record,"---174点击行数据")
            switch (item.icon) {
                case "xuqiuIcon":
                    this.selectGenerateFileInfo=record
                    this.isRemarkShowPopUp = true
                    break;
                case "stqrIcon":
                    this.selectGenerateFileInfo=record
                    this.isConfirmPopUp = true
                    break;
                case "daotiIcon":
                    uni.navigateTo({
                        url: '/myQuestionBank/feedbackPage?info=' + encodeURIComponent(JSON.stringify({...record}))
                    })
                    break;
                default:
                    break;
            }
        },
        // 获取文件icon
        getFileIcon(fileName) {
            // 是word
            if(fileName.includes("doc")||fileName.includes("docx")){
                return "https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/Word.svg"
            }
            // 是excel
            else if(fileName.includes("xls")||fileName.includes("xlxs")){
                return "https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/Excel.svg"
            }
            // 是pdf
            else if(fileName.includes("pdf")){
                return "https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/Pdf.svg"
            }   
            // 是zip
            else if(fileName.includes("zip")){
                return "https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/Zip.svg"
            }
            // rar
            else{
                return "https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/RAR.svg"
            }
        },
        // 确认备注
        onBatchInputOk() {
            this.isRemarkPopUp = false
        },
        // 确认操作
        onSumitOprtion() {
            if(this.pInfo.doing=="2"){
                return notificationFun("正在进行Ai智能生成试题，暂不支持其他形式的试题录入")
            }
            console.log(this.selectGenerateFileInfo,"--213")
            storeArtificial({artificialFileUuid:this.selectGenerateFileInfo.uuid}).then(()=>{
                notificationFun("操作成功")
                this.onQueryData()
                this.isConfirmPopUp = false
              
            })  
           
        },
        // 添加说明
        onAddDescr(){
            this.isRemarkPopUp = true
        },
        // 上传文件
        uploadFile(){
            if(onShowTipInfo(this.pInfo.doing)){
                return
            }
            let that=this
            wx.chooseMessageFile({
                type:"file",
                count: 1,  // 可选择的文件数量
                extension:['.doc','.docx','.xls','.xlxs','.pdf',".zip","rar"],  // 可选择的文件类型
                success: function (res) {
                    // console.log(res.tempFiles[0].path)  // 文件路径
                    // 进行文件上传操作
                    that.fileInfo = {
                        fileName:res.tempFiles[0].name,
                        filePath:res.tempFiles[0].path
                    }
                    // getBase64ByUrl(res.tempFiles[0].path,(base64)=>{
                        
                    // })  
                }
            })
        },
        // 开始上传
        onOkUpload(isSelectStatus){
            if(this.fileInfo.fileName == ""){
                return notificationFun("请先上传文件")
            }
            else if(!this.numValue){
                return notificationFun("请输入导题数量")
            }
            else if(this.numValue<=0){
                return notificationFun("导题数量必须大于0")
            }
            console.log(this.fileInfo.filePath,"--306")
            if(isSelectStatus){
                if(!this.numValue){
                    return notificationFun("请输入人工导题数量")
                }
                exchangeInfo({organId:this.organId,quantity:this.numValue,rightsType:2}).then(res=>{
                    this.modeConfig=res||{}
                    this.isExchangeDetails=true;
                })
                // importStructTheoryArtificialFile(param).then(res=>{
                //         notificationFun("上传成功")
                //         this.fileInfo = {
                //             fileName:"",
                //             filePath:""
                //         }
                //         this.onQueryData()
                //         this.isAffiliationPopup = false
                //     })
                }
                else{
                    // 如果没有所属机构
                    getOrganList().then(res => {
                        this.organList = res
                        if (Array.isArray(res) && res.length < 2) {
                            exchangeInfo({organId:res[0]?.organId,quantity:this.numValue,rightsType:2}).then(res=>{
                                this.modeConfig=res||{}
                                this.organId=res[0]?.organId
                                this.isExchangeDetails=true;
                            })
                            // importStructTheoryArtificialFile({...param,organId:res[0]?.organId??""}).then(res => {
                            //     notificationFun("上传成功")
                            //     this.fileInfo = {
                            //         fileName: "",
                            //         filePath: ""
                            //     }
                            //     this.onQueryData()
                            // })
                        }
                        else {
                            this.isAffiliationPopup = true
                        }
                    })
                }
            // getBase64ByUrl(this.fileInfo.filePath,(base64)=>{
            //     let urlArr = this.fileInfo.fileName.split('.')
            //     let headerText=urlArr[urlArr.length-1]+","
            //     console.log(urlArr[urlArr.length-1],"--227")
            //     // let headerText=urlArr[urlArr.length-1]=="doc"?"data:application/msword;base64,":"data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,"
            //     let param={
            //         subjectUuid:this.pInfo.subjectUuid,
            //         remark:this.remarkContent||"",
            //         fileName:this.fileInfo.fileName, 
            //         base64:headerText+base64,
            //         organId:this.organId,
            //     }
          
                
               
            // })
        },
        // 提交开始兑换
        onExchangeSubmit(){
            getBase64ByUrl(this.fileInfo.filePath, (base64) => {
                    let urlArr = this.fileInfo.fileName.split('.')
                    let headerText = urlArr[urlArr.length - 1] + ","
                    console.log(urlArr[urlArr.length - 1], "--227")
                    // let headerText=urlArr[urlArr.length-1]=="doc"?"data:application/msword;base64,":"data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,"
                    let importParam = {
                        subjectUuid: this.pInfo.subjectUuid,
                        remark: this.remarkContent || "",
                        fileName: this.fileInfo.fileName,
                        base64: headerText + base64,
                        organId: this.organId,
                        itemNum:this.numValue,
                        payType:this.selectMethod,

                    }   
                    importStructTheoryArtificialFile({ ...importParam, organId: this.organId ?? "" }).then(res => {
                        notificationFun("上传成功")
                        this.fileInfo = {
                            fileName: "",
                            filePath: ""
                        }
                        this.onQueryData()
                    })
                    
                })
                
         
        },
        onSelectOrgan(record){
            console.log(record,"--353")
            this.organId=record.organId;
            this.onOkUpload(true)
        },
        // 查询生成数据
        onQueryData(){
            listArtificialFile(this.pInfo.subjectUuid).then(res=>{
                this.fileList=res||[]
            })
        },
        // 删除文件
        onDelFile(){
            this.fileInfo = {
                fileName:"",
                filePath:""
            }
        },
        // 跳转去续费
        onJump(){
            uni.navigateTo({
                url: '/myQuestionBank/rechargePersonTimesPage'
            })
        },
        // 更改分值
        onInputNum(e) {
            // 最多不能超过10位
            
            // 部分情况 , 事件参数e会有一定区别, 这里只需要 e.detail.value 是输入的那个字符串即可
            let num = e?.target?.value?.match(/^\d*(\.?\d{0,1})/g)[0] || null;
            if(Number(num)>100000){
                return;
            }
            this.numValue=num
        },
    },
    mounted() {
        // Add your mounted logic here
    },
    beforeMount() {
        uni.getSystemInfo({
            success: (res) => {
                console.log(res.safeAreaInsets)
                // this.windowWidth = res.windowWidth
                // this.windowHeight = res.windowHeight
                this.safeAreaInsets = res.safeAreaInsets
            }
        })
    },
    computed: {

    }
};
</script>

<style scoped lang="scss">
.artificialGuidedQuestionsStyle {
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    padding: 12rpx 30rpx;
    .labelStyle{
        /* width: 60rpx; */
        padding: 2rpx 10rpx 0 10rpx ;
        height: 32rpx;
        border-radius: 10rpx;
        color: #A86C12;
        background-color: #EED682;
        text-align: center;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .stepStyle {
        border-radius: 30rpx 30rpx 0 30rpx;
        background-color: #f6fff7;
        color: #37B874;
        height: 44rpx;
        width: 98rpx;
        font-size: 24rpx;
        font-weight: 600rpx;
        border: 2rpx solid #37B874;
    }

    .cardStyle {
        position: relative;
        .topTopStyle{
            color:#fff;
            position:absolute;
            z-index:99;
            bottom:40rpx;
            left:40rpx;
            font-size:22rpx;
            /* display: flex; */
        }
    }

    .stepOne {
        margin-top: 60rpx;

        .uploadStyle {
            /* height: 340rpx; */
            height: 236rpx;
            border: 1rpx dashed #37B874;
            flex-direction: column;
            margin-top: 60rpx;
            border-radius: 24rpx;
            background-color: #f9f9f9;
        }

        /* .btnStyle {
            width: 480rpx;
            height: 72rpx;
            border-radius: 24rpx;
            color: #fff;
            background-color: #37B874;
        } */
        .textStyle{
            color: #37B874;
            font-size: 24rpx;
            text-decoration: underline;
        }
        .numStyle{
            width: 100%;
            height: 150rpx;
            display: flex;
            align-items: center;
            border-radius: 24rpx;
            background-color: #f9f9f9;
            padding: 40rpx;
            border: 1rpx dashed #37B874;
            box-sizing: border-box;
            margin-top: 20rpx;
            .inputStyle{
                background-color: #FFFFFF;
                padding-left: 28rpx;
                /* margin-left: 30rpx; */
                /* width: 80%; */
                height: 72rpx;
                flex: 1;
                display: flex;
                align-items: center;
                border-radius: 24rpx;
            }
            .btnStyle{
                width: 164rpx;
                margin-left: 30rpx;
                border-radius: 24rpx;
                color: #fff;
                height: 72rpx;
                background-color: #37B874;
            }
        }

    }

    .stepTwo {
        .lineStyle {
            width: 100vw;
            height: 1rpx;
            background-color: #F2F2F2;
            position: absolute;
            bottom: 0;
            left: -30rpx;
        }

    }
    .fileItemStyle{
            padding: 0 38rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
    }
    .resultStyle {
        padding: 38rpx 0;
        display: flex;
        flex-direction: column;
        /* align-items: center; */
        border-bottom: 1rpx solid #F2F2F2;
    }

    .borderBottom {
        border-bottom: 1rpx solid #f2f2f2;
    }
    .okBtn {
            padding: 32rpx;
            border-top: 1px solid #EEEEEE;
    }
 
    .selectTypeItem {
        display: flex;
        justify-content: center;
        padding: 32rpx 20rpx;
        border-bottom: 1rpx solid #eee;
    }
    /* 兑换样式 */
    .exchangeWrap{
        padding: 0 36rpx 60rpx 36rpx;
        .exchangeStyle {
                background-color: #F2F9F8;
                border-radius: 24rpx;
                min-height: 350rpx;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
            
                .topStyle {
                    display: flex;
                    justify-content: space-between;
                    padding-right: 40rpx;
                    .leftStyle {
                        width: 328rpx;
                        height: 114rpx;
                        position: relative;
        
                        image {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 328rpx;
                            height: 114rpx;
                            z-index: 1;
                        }
        
                        text {
                            position: absolute;
                            top: 22rpx;
                            left: 40rpx;
                            z-index: 2;
                            font-size: 28rpx;
                        }
                    }
        
                    .rightStyle {
                        display: flex;
                        align-items: center;
                        color: #37B874;
                        flex: 1;
                        justify-content: space-between;
                        height: 84rpx;
                        font-size: 26rpx;
                        margin-left: 36rpx;
                        white-space: nowrap;
                        image {
                            width: 26rpx;
                            height: 26rpx;
                        }
        
                        .lineStyle {
                            background-color: #C8F1DB;
                            width: 4rpx;
                            height: 18rpx;
        
                        }
                    }
                }
        
                .centerStyle {
                    font-size: 26rpx;
                    color: #333333;
                    padding:0 40rpx;
                    flex: 1;
                    max-height: 300rpx;
                }
        
                .bottomStyle {
                    border-top: 2rpx solid #FFFFFF;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: #37B874;
                    padding:24rpx 40rpx 24rpx 40rpx;
                    
                }
            }
    }
   
}
</style>